<template>
  <div class="custom-input">
    <div class="label-box" v-if="label">
      <span>{{label}}</span>
    </div>
    <div class="main-box" :class="{'is-sms-input': smsCode}">
      <slot>
        <f7-list v-if="type === 'select'">
          <f7-list-item v-if="select.length > 0" :title="label" ref="smartSelect" link smart-select :smart-select-params="{pageBackLinkText: '返回',closeOnSelect:true}">
            <select name="fruits" :value="value" @change="handleSelectChange($event.target.value)">
              <option :value="item.id" v-for="(item, index) in select" :key="index">{{item.name}}</option>
            </select>
          </f7-list-item>
        </f7-list>
        <div class="upload-box" v-else-if="type === 'file'">
          <div v-if="!imgUrl">
            <p>{{placeholder}}</p>
          </div>
          <img v-else :src="imgUrl" alt="">
          <input type="file" @change="handleSelectFile">
        </div>
        <textarea v-else-if="type === 'textarea'" :placeholder="placeholder" @input="$emit('input', $event.target.value)"></textarea>

        <template v-else>
          <input :value="value" :type="type" :placeholder="placeholder" @input="$emit('input', $event.target.value)">
          <f7-button :disabled="smsStatus" fill v-if="smsCode" @click="handleSend">{{smsStatus?curCount:'发送验证码'}}</f7-button>
        </template>
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "custom-input",
    data() {
      return {
        curCount: this.count,
        imgUrl: this.value
      }
    },
    props: {
      value: [String, Number],
      placeholder: String,
      label: {
        type: String,
      },
      type: {
        type: String,
        default: 'text'
      },
      select: {
        type: Array
      },
      smsCode: Boolean,
      smsStatus: Boolean,
      count: {
        type: Number,
        default: 60
      }
    },
    watch: {
      smsStatus(newv) {
        if (newv) this.startCountDown()
      },
      value(newv) {
        if (this.type === 'file') this.imgUrl = newv;
        else if(this.type === 'select') {
          if(this.$refs.smartSelect) this.$refs.smartSelect.f7SmartSelect.setValue(newv);
        }
      }
    },
    methods: {
      handleSend() {
        this.$emit('send');
      },
      startCountDown() {
        console.log('开始')
        let timeId = setInterval(() => {
          this.curCount--;
          if(this.curCount === 0) {
            this.curCount = this.count;
            this.$emit('update:smsStatus', false)
            clearInterval(timeId);
          }
        }, 1000)
      },
      handleSelectChange(value) {
        this.$emit('input', value);
        this.$emit('change', value);
      },
      handleSelectFile(e) {
        const file = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          console.log(e)
          this.imgUrl = e.target.result;
          this.$emit('change', e.target.result);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .custom-input {
    > .main-box {
      background:linear-gradient(90deg,rgba(72,166,199,1),rgba(87,225,255,1),rgba(72,166,199,1));
      border-radius:20px;
      color: $fontColor;
      min-height:84px;
      &.is-sms-input {
        background: transparent;
        display: flex;
        input,.button {
          flex: 1;
        }
        input {
          border-radius:20px;
          background:linear-gradient(90deg,rgba(72,166,199,1),rgba(87,225,255,1),rgba(72,166,199,1));
          margin-right: 20px;
        }
      }
      > * {
        height: 84px;
      }
    }
    .label-box {
      padding: 10px;
      span {
        /*display: block;*/
        color:rgba(255,255,255,1);
        background:linear-gradient(57deg,rgba(72,166,199,1) 0%, rgba(87,225,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        font-size: 25px;
      }
    }

    input, textarea {
      width: 100%;
      color: $fontColor;
      height: 84px;
      padding: 0 30px;
      font-size: 25px;
    }
    textarea {
      min-height: 280px;
      padding: 30px;
    }
    /deep/ {
      .item-inner {
        min-height: 84px;
        background: none;
        .item-after {
          color: $fontColor;
        }
        &:before {
          //background: red;
          display: block;
          color: $fontColor;
        }
      }
      .item-title {
        color: $fontColor;
        background: none;
        -webkit-text-fill-color: #000;
      }
    }


    .upload-box {
      height: 370px;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        color: red;
        -webkit-text-fill-color: #000;
        font-size: 26px;
      }
      position: relative;
      input[type='file'] {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        opacity: 0;
        left: 0;
        top: 0;
      }
      img {
        width: 80%;
        height: 80%;
      }
    }
  }
</style>